<script setup>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { getOrderList } from "@/api/user";
import { useUser } from "@/store/useUser";

const userStore = useUser();
const userInfo = userStore.getUserInfo;
const router = useRouter();

// 订单状态对应(0:待支付 1:待开启 2:已取消 3:履约中 4:已完成 5:待评价 6:已完成 )
const orderStatusText = ref([
  {
    name: "待支付",
    status: 0,
    color: "rgba(25, 30, 40, 1)",
  },
  {
    name: "待开启",
    status: 1,
    color: "rgba(59, 130, 246, 1)",
  },
  {
    name: "已取消",
    status: 2,
    color: "rgba(59, 130, 246, 1)",
  },
  {
    name: "履约中",
    status: 3,
    color: "rgba(29, 191, 115, 1)",
  },
  {
    name: "已交付",
    status: 4,
    color: "rgba(1, 154, 129, 1)",
  },
  {
    name: "待评价",
    status: 5,
    color: "rgba(1, 154, 129, 1)",
  },
  {
    name: "已完成",
    status: 6,
    color: "rgba(25, 30, 40, 0.60)",
  },
]);

const tableData = ref([]);
const total = ref(0);
const pageSize = ref(10);
const pageNum = ref(1);
const currentStatus = ref(null); // 新增：当前选中的状态
const loading = ref(false); // 新增：loading 状态

const getOrders = async () => {
  loading.value = true; // 开始加载
  try {
    const params = {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      sysUserId: userInfo.userId,
    };
    if (currentStatus.value !== null) {
      params.status = currentStatus.value;
    }
    const res = await getOrderList(params);
    if (res.code === 200) {
      tableData.value = res.data.records;
      total.value = res.data.total;
      pageSize.value = res.data.size;
      pageNum.value = res.data.current;
    } else {
      console.error(res.msg);
    }
  } catch (error) {
    console.error("获取订单列表失败", error);
  } finally {
    loading.value = false; // 结束加载
  }
};

const currentChange = (page) => {
  pageNum.value = page;
  getOrders();
};

const changeStatus = (status) => {
  currentStatus.value = status === "all" ? null : status;
  pageNum.value = 1; // 重置页码
  getOrders();
};

onMounted(() => {
  getOrders();
});

const rowClick = (row) => {
  router.push(`/orderDetails?id=${row.orderId}&gid=${row.goodsId}`);
};

// 计算属性：获取状态文本和颜色
const getStatusInfo = computed(() => (status) => {
  const statusInfo = orderStatusText.value.find(
    (item) => item.status === status
  );
  return statusInfo || { name: "未知状态", color: "rgba(25, 30, 40, 0.60)" };
});
</script>

<template>
  <h3>我的订单</h3>
  <div class="my-order">
    <div class="tabs-box">
      <p class="tabs">
        <span
          :class="{ active: currentStatus === null }"
          @click="changeStatus('all')"
          >全部</span
        >
        <span
          v-for="status in orderStatusText"
          :key="status.status"
          :class="{ active: currentStatus === status.status }"
          @click="changeStatus(status.status)"
        >
          {{ status.name }}
        </span>
      </p>
    </div>
    <el-table
      v-loading="loading"
      class="goods-table"
      :data="tableData"
      style="flex: 1; max-height: calc(100vh - 242px)"
      @row-click="rowClick"
    >
      <el-table-column label="买家" width="280px">
        <template #default="scope">
          <div class="skill-info">
            <img :src="scope.row.buyerProfile" alt="" />
            <div class="name">
              <span>{{ scope.row.name || scope.row.buyerUserId || "-" }}</span>
              <span>{{ scope.row.buyerCompany || "公司信息未提供" }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="服务" width="300px">
        <template #default="scope">
          <div class="goods-info">
            <img v-if="scope.row.coverPic" :src="scope.row.coverPic" alt="" />
            <span>{{ scope.row.goodsName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="orderType">
        <template #default="scope">
          {{ scope.row.orderType === 1 ? "计件" : "其他类型" }}
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="startTime">
        <template #default="scope">
          {{ scope.row.createTime || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="结束时间" prop="endTime">
        <template #default="scope">
          {{ scope.row.endTime || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="总价" prop="amount">
        <template #default="scope"> ¥{{ scope.row.amount }} </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="{ row }">
          <span :style="{ color: getStatusInfo(row.status).color }">
            {{ getStatusInfo(row.status).name }}
          </span>
        </template>
      </el-table-column>
      <template #empty>
        <div class="table-empty">
          <img src="@/assets/empty-img.png" alt="" />
          <p>当前暂无订单</p>
        </div>
      </template>
    </el-table>
    <div class="paging-box">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        :current-page="pageNum"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.my-order {
  flex: 1;
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  margin-top: 16px;
  overflow-y: auto;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.tabs-box {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 24px;
  .tabs {
    display: flex;
    align-items: center;
    span {
      margin-right: 40px;
      cursor: pointer;
      &.active {
        color: #1dbf73;
        font-weight: bold;
        position: relative;
        &:after {
          content: "";
          display: block;
          width: 100%;
          height: 2px;
          background: #1dbf73;
          position: absolute;
          bottom: -10px;
          left: 0;
        }
      }
    }
  }
  a {
    width: 108px;
    height: 36px;
    background: #1dbf73;
    border-radius: 8px 8px 8px 8px;
    text-align: center;
    line-height: 36px;
    color: #fff;
    text-decoration: none;
  }
}
.skill-info {
  display: flex;
  align-items: center;
  img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 8px;
  }
  .name {
    display: flex;
    flex-direction: column;
    span:nth-child(2) {
      color: rgba(25, 30, 40, 0.48);
      font-size: 12px;
    }
  }
}
.goods-info {
  display: flex;
  align-items: center;
  img {
    flex: 0 0 60px;
    width: 60px;
    height: 40px;
    margin-right: 5px;
    border-radius: 4px;
    object-fit: cover;
  }
  span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 48px;
    line-height: 24px;
  }
}
.paging-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}
.table-empty {
  text-align: center;
  margin-top: 150px;
  img {
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
  }
  p {
    color: rgba(25, 30, 40, 0.6);
    line-height: 14px;
  }
}
</style>
